const { defineConfig } = require("@vue/cli-service");
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const webpack = require("webpack");
const CompressionPlugin = require("compression-webpack-plugin");
const zlib = require("zlib");
const path = require("path");
const Timestamp = new Date().getTime();
const ISPROD = process.env.NODE_ENV === "production";
module.exports = defineConfig({
  publicPath: "./",
  transpileDependencies: true,
  productionSourceMap: false,
  // chainWebpack(config) {
  //   config.plugin("monaco").use(new MonacoWebpackPlugin());
  // },
  configureWebpack: {
    output: {
      filename: `[name].js?v=${Timestamp}`,
      chunkFilename: `[name].js?v=${Timestamp}`,
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
        "@i": path.resolve(__dirname, "./src/assets"),
      },
    },
    plugins: [
      new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/,
      }),
      // 下面两项配置才是 compression-webpack-plugin 压缩配置
      // 压缩成 .gz 文件
      new CompressionPlugin({
        filename: "[path][base].gz",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
      // 压缩成 .br 文件，如果 zlib 报错无法解决，可以注释这段使用代码，一般本地没问题，需要注意线上服务器会可能发生找不到 zlib 的情况。
      new CompressionPlugin({
        filename: "[path][base].br",
        algorithm: "brotliCompress",
        test: /\.(js|css|html|svg)$/,
        compressionOptions: {
          params: {
            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
          },
        },
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  },
  chainWebpack(config) {
    config.plugin("monaco").use(new MonacoWebpackPlugin());
    if (ISPROD) {
      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            //commons 一般是是个人定义的
            name: "chunk-common", // 打包后的文件名
            chunks: "initial",
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
          },
          vendors: {
            //vendor 是导入的 npm 包
            name: "chunk-vendors",
            test: /[\\/]node_modules[\\/]/,
            chunks: "initial",
            maxSize: 600000,
            maxInitialRequests: 20,
            priority: 2,
            reuseExistingChunk: true,
            enforce: true,
          },
          antDesignVue: {
            //把antDesignVue从chunk-vendors.js提取出来。当然我们也可以把mixins，vue.min.js等等也按照类似配置提取出来
            name: "chunk-ant-design-vue",
            test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/,
            chunks: "initial",
            priority: 3,
            maxSize: 600000,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      });
    }
  },
  lintOnSave: false,
});
